<template>
  <div>
    <my-header :showBack="true" :title="$t('lang.activate')"></my-header>
    <div>
      <div class="personal_info">
        <div class="top_asbg">
          <div class="as_left">
            <h3>{{topreg||"0.000"}}</h3>
            <p>{{$t('lang.RegisterPoint')}}</p>
          </div>
          <div class="as_right">
            <h3>{{topact||"0.000"}}</h3>
            <p>{{$t('lang.ActivationPoint')}}</p>
          </div>
        </div>
        <van-cell-group>
          <!-- <van-field v-model="userInfo.customerNumber"  label="选择兑换中心" :disabled="true"/> -->
          <div class="ce_filed" @click="showCountry">
            <div class="ce_flex">
              <label for="">{{$t('lang.soec')}}</label><p  :data-id="centerId">{{UserNumber}}</p> 
            </div>
            <i class="iconfont icon-arrow-right"></i>
          </div>
          <van-field v-model="marketValue"  :label="$t('lang.shareprice')" :disabled="true"/>
          <!-- <van-field v-model="Leavetype"   label="升级级别" :disabled="disabledInput" /> -->
          <div class="ce_filed" @click="showSelet">
            <div class="ce_flex">
              <label for="">{{$t('lang.upgradeLv')}}</label><p  :data-id="UpTypeId">{{UpTypeName}}</p> 
            </div>
            <i class="iconfont icon-arrow-right"></i>
          </div>
          <van-field v-model="payWord"   :label="$t('lang.scccPword')"  type="password" :placeholder="$t('lang.enterSpword')"/> 
        </van-cell-group>
      </div>
      <div class="tips">
        <p>{{$t('lang.uwdaarpftcl')}}</p>
      </div>
      <div class="footer_btn">
        <van-button type="primary" size="large" @click="confirm">{{$t('lang.confirm')}}</van-button>
      </div>
      <van-actionsheet
        v-model="show"
        :actions="actions"
        :cancel-text="$t('lang.cancel')"
        @select="onSelect"
      />
      <!-- 选择兑换中心弹出层 -->
    <van-popup class="xy_popup" v-model="qrPopup"  position="right" :overlay="false">
       <my-header :showBack="true"  :title="$t('lang.soec')"></my-header>
        <div class="setbi_box">
              <div class="info_bibox" >
                <ul>
                  <li v-for="item in counteryceList" :key="item.index" class="conteyli" @click="setCounName(item)">
                    <div>
                      <p>{{$t('lang.user')}}：{{item.customerNumber}}</p>
                      <p>{{$t('lang.UseStock')}}：{{item.useStock}}</p>
                      
                    </div>
                    <i class="iconfont icon-arrow-right1"></i>
                  </li>
                </ul>
              </div>
        </div>       
    </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import header from "@/components/header";

export default {
name: "modifyMsg",
  data() {
    return {
      userInfo:{},
      disabledInput:false,
      qrPopup:false,
      LeavetypeInfo:"",
      payWord:"",
      UpTypeName:"",
      UpTypeId:"",
      

      show:false,
      actions: [ ],
      marketValue:"",
      counteryceList:[],
      UserNumber:"",
      centerId:"",

      topreg:"",
      topact:"",
    };
  },
  components: {
    "my-header": header
  },
  watch:{
    '$route'(val,oldval){
      if(oldval.fullPath.indexOf('?')!=-1){
        this.qrPopup = false;
        this.bilistProp = false;
      }
      if(val.fullPath.indexOf('?qrPopup')!=-1){
        this.qrPopup = true;
      }
      if(val.fullPath.indexOf('?bilistProp')!=-1){
        this.bilistProp = true;
      }
    },
    inputName(val){
      console.log(val);
    },
  },
  created() {
    let customerInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.userInfo = {
      customerName:customerInfo.customerName||'',
      realName:customerInfo.realName||'',
      customerCard:customerInfo.idCard||'',
      customerPhone:customerInfo.customerPhone||'',
      customerAlipay:customerInfo.customerAlipay||'',
      bankName:customerInfo.bankName||'',
      bankCard:customerInfo.bankCard||'',
      // email:customerInfo.email||''
    }
    if(this.userInfo.idCard){
      this.disabledInput = true;
    };
    this.getLevels();
  },
  mounted() {
    this.getUserInfo();
    this.selectMarket();
    this.selectAccount();
    console.log(this.Usertype);
  },
  methods: {
    selectMarket(){
      //今日股价
      this.$ajax(this.$api.selectMarket).then(res=>{
          if(res.code==0){
            this.marketValue  = res.msg.dollarRate;
          }
      })
    },
    getUserInfo() {
      //获取用户信息
      this.$ajax(this.$api.getMyInfo).then(res => {
        if (res.code == 0 && res.msg) {
          this.userInfo  = res.msg;
          localStorage.setItem("userInfo", JSON.stringify(res.msg));
          this.customerPhone=res.msg.customerPhone;
        }
      });
    },
    getLevels(){
      //获取系统等级
      this.$ajax(this.$api.getLevels).then(res => {
        if (res.code == 0 && res.msg) {
          this.LeavetypeInfo=res.msg;
          this.UpTypeName=res.msg[0].levelName;
          this.UpTypeId=res.msg[0].id;
          const Arrlist=[];
          for (let index = 0; index < this.LeavetypeInfo.length; index++) {
            const name = this.LeavetypeInfo[index].levelName;
            const id = this.LeavetypeInfo[index].id;
            var objInfo = {name:name,id:id};
            Arrlist.push(objInfo);
          }
          this.actions=Arrlist;
          console.log(this.actions);
          
        }
      });
    },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      Toast(item.name);
      this.UpTypeName=item.name;
      this.UpTypeId=item.id;
    },
    showSelet(){
      this.show=true;
    },
    confirm() {
      if(this.UserNumber==""||this.centerId==""){
        Toast({ message: this.$t('lang.soec'), position: "bottom" });
        return;
      }
      if(this.UpTypeId==""){
        Toast({ message: this.$t('lang.psml'), position: "bottom" });
        return;
      }
      console.log(this.UpTypeId)
      if (this.payWord=='') {
        Toast({ message: this.$t('lang.enterSpword'), position: "bottom" });
        return;
      }
      if (!this.$validator.isPassword(this.payWord)) {
        Toast({ message: this.$t('lang.truepayPass'), position: "bottom" });
        return;
      }
      this.$ajax(this.$api.actCustomer, {payPass:this.payWord,id:this.UpTypeId,centerId:this.centerId}).then(res => {
        if (res.code === 0) {
          Toast({ message: this.$t('lang.CZsuccessful'), position: "bottom" });
          this.payWord="";
          this.getUserInfo();
          this.selectAccount();
        }else{
          Toast({ message: res.msg, position: "bottom" });
        }
      });
    },
    showCountry(){
      if(window.location.href.indexOf('?qrPopup')==-1){
        window.location.href = window.location.href+'?qrPopup';
      }
      this.qrPopup = true;
      // getCountry
      this.$ajax(this.$api.getCenter,).then(res => {
        if (res.code == 0) {
          this.counteryceList=res.msg;
        }else{
          Toast({message: res.msg,position: "bottom"});
        return;
        }
      })
    },
    setCounName(item){
      this.centerId=item.id;
      this.UserNumber=item.customerNumber;
      
      this.qrPopup = false;
    },
    selectAccount(){
      // 个人资产
      this.$ajax(this.$api.selectAccount).then(
        res=>{
          if(res.code==0){
            this.MyAsset=res.msg;

            const UseStock = res.msg.useStock.toFixed(3);
            const DeliveryStock = res.msg.deliveryStock.toFixed(3);
            const FixedStock = res.msg.fixedStock.toFixed(3);
            const DynamicMoney = res.msg.dynamicMoney.toFixed(3);
            const StaticMoney = res.msg.staticMoney.toFixed(3);
            const ActivationPoint = res.msg.activationPoint.toFixed(3);
            const UsePoint = res.msg.usePoint.toFixed(3);
            const RegisterPoint = res.msg.registerPoint.toFixed(3);
            const UseBonus = res.msg.useBonus.toFixed(3);
            
            var listArr=new Array();
            listArr =[{Name:'流通分',num:UsePoint,linkDress:"/circulate"},{Name:'可用股权',num:UseStock,linkDress:"/assetIndex"},
            {Name:'定期股权',num:FixedStock,linkDress:"/assetIndex"},{Name:'配送股权',num:DeliveryStock,linkDress:"/assetIndex"},
            {Name:'注册分',num:RegisterPoint,linkDress:"/Registration"},{Name:'激活分',num:ActivationPoint,linkDress:"/Activatepoints"},
            {Name:'静态配套',num:StaticMoney,linkDress:"/FormAsset"},{Name:'动态配套',num:DynamicMoney,linkDress:"/FormAsset"},
            {Name:'奖金',num:UseBonus,linkDress:"/Bonus"},]
            console.log(res.msg);
            console.log(listArr);
            this.topreg=res.msg.registerPoint.toFixed(3);//注册分
            this.topact=res.msg.activationPoint.toFixed(3);//激活分
          }
        }
      )
    },
  }
};
</script>

<style lang='less' scoped>
.personal_info{
  margin: 0!important;
}
/* .personal_info .van-cell {
  border-bottom: 6px solid #f4f4f4;
} */
.personal_info .btn{
  width:80%;
  background: #26a2ff;
  margin-top:50px;
  margin-left: 10%;
  box-shadow: none;
  border-radius: 5px;
  color:#fff;
  font-size:16px;
}
.tips{color: #EB0700;padding: 12px;}
.ce_filed{display: flex;justify-content:space-between ;box-sizing: border-box;padding: 10px 15px;border-bottom: 1px solid #eeeeee;}
.ce_filed label{max-width: 110px!important;width: 110px;}
.ce_flex{display: flex;}
.xy_popup{
  width: 100%;
  height: 100%;
  .xy_box{
    padding: 20px 12px;
    box-sizing: border-box;
    border-radius: 0px;
  }
  .xy_boxbg{
    padding: 20px 20px 40px 20px;
    background: #f5f5f5;
  }
}
.setbi_box{background: #f5f5f5;}
.conteyli{border-bottom: 1px solid #eeeeee;display: flex;justify-content:space-between;align-items:center ;
  box-sizing: border-box;padding: 10px 12px;margin-bottom: 10px;background: #fff;
  p{line-height: 24px;}
}
// 
.top_asbg{
  display: flex; justify-content: space-between ;text-align: center;
  background: linear-gradient(150deg, #ac0600 0%, #870200 100%);
  border-radius: 2px;box-sizing:border-box;margin:10px 12px;padding: 12px 0;;
  div{flex: 1;}
  h3{color: #E1AF56;font-size: 24px;line-height: 30px;}
  p{color: #AA7A24;}
}
</style>

